<template>
  <div class="gva-table-box">
    <el-header>
      <div class="top-box">
        <!-- 返回上级文件夹按钮 -->
        <i class="el-icon-arrow-left" @click="returnParentFolder"></i>
        <!-- 文件路径导航 -->
        <el-breadcrumb separator="/">
          <el-breadcrumb-item v-for="(path, index) in paths" :key="index">
            <el-link @click="jumpToFolder(index)" style="font-size: large;">{{ path.name }}</el-link>
          </el-breadcrumb-item>
        </el-breadcrumb>
      </div>
    </el-header>
    <el-table ref="table" :data="files" empty-text="空文件夹" @row-click="enterFolder" v-loading="loading">
      <el-table-column label="文件名称">
        <template #default="scope">
          <el-icon v-if="scope.row.type === '文件夹'" class="folder-icon">
            <folder/>
          </el-icon>
          <el-icon v-else class="file-icon">
            <document/>
          </el-icon>
          {{ scope.row.name }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="类型" prop="type" width="100"/>
      <el-table-column align="center" label="大小" prop="size" width="100"/>
      <el-table-column align="center" label="创建者id" prop="createId" width="150"/>
      <el-table-column align="center" label="创建时间" prop="createTime" width="200"/>
      <el-table-column align="center" label="修改时间" prop="updateTime" width="200"/>
      <el-table-column align="center" label="操作" width="100">
        <template #default="scope">
          <el-button :disabled="scope.row.type === '文件夹'" @click="download(scope.row)" :icon="Download"
                     plain type="primary" link>下载
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-footer>
      <div style=" margin: 20px auto;">
        <!-- 分页器 -->
        <el-pagination :hide-on-single-page="limit===10" class="pagination" background @size-change="handleSizeChange"
                       @current-change="handleCurrentChange" :current-page="page" :page-size="limit"
                       layout="total,prev, pager, next, jumper" :total="total">
        </el-pagination>
      </div>
    </el-footer>
  </div>
</template>

<script>
import {downloadFile, getFileList} from '@/api/file'
import {Document, Download, Folder} from "@element-plus/icons-vue";
import {ElMessage, ElMessageBox} from "element-plus";

export default {
  name: 'File-Shared-View',
  computed: {
    Download() {
      return Download
    }
  },
  components: {Document, Folder},
  data() {
    return {
      files: [],
      page: 1,
      limit: 10,
      total: 0,
      paths: [{id: 0, name: '根目录'}],
      loading: true
    }
  },
  created() {
    this.getFiles(0)
  },
  methods: {
    //分页组件
    handleSizeChange(val) {
      this.limit = val;
    },
    handleCurrentChange(val) {
      this.page = val;
      let parentId = this.paths[this.paths.length - 1].id
      this.getFiles(parentId)
    },
    getFiles(parentId) {
      this.loading = true
      getFileList({pageNumber: this.page, pageSize: this.limit, parentId: parentId, shared: true})
          .then(result => {
            if (result.code === 0) {
              this.files = result.data.records
              this.total = +(result.data.total);
              // this.$refs.table.doLayout()
              this.loading = false
            }
          })
    },
    enterFolder(row, column) {
      if (row.type === '文件夹' && column.label !== '操作') {
        this.getFiles(row.id)
        this.paths.push({id: row.id, name: row.name})
      }
    },
    jumpToFolder(index) {
      if (index + 1 < this.paths.length) {
        this.getFiles(this.paths[index].id)
        this.paths.splice(index + 1)
      }
    },
    returnParentFolder() {
      if (this.paths.length > 1) {
        this.paths.pop()
        this.getFiles(this.paths[this.paths.length - 1].id)
      }
    },
    download(row) {
      ElMessageBox.prompt('请输入文件名', '下载', {
        inputValue: row.name,
        inputPattern: /^.{1,20}$/,
        inputErrorMessage: '文件名应为1-20个字符'
      }).then(({value}) => {
        downloadFile(row.id).then(result => {
          if (result) {
            let link = document.createElement('a')
            let blob = new Blob([result.data], {type: 'application/octet-stream'})
            link.href = window.URL.createObjectURL(blob)
            link.setAttribute('download', value)
            link.click()
          }
        })
      }).catch(() => {
        ElMessage.warning('已取消下载！')
      })
    },
    handleCommand(command, row) {
      if (command === 'download') {
        this.download(row)
      }
    }
  }
}
</script>
<style>
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
}

.top-box {
  display: flex;
  align-items: center;
  font-size: large;
}

.miantable {
  /* justify-content: center; */
  display: flex;
  flex: 1;
}
</style>
